Mootools- Menú con efecto persiana

Hace tiempo que deseaba probar los efectos de la librería Mootools es una librería que permite múltiples efectos con herramientas de lo más variado.

Con Mootools podemos conseguir crear una galería de imágenes como esta, pero eso es algo que últimamente no puedo permitirme ya que requiere tiempo y organizar las imágenes, bastantes imágenes.

Lo que si he tratado de llevar a buen término es image menu, se trata de un menú con imágenes muy atractivo y efecto persiana. Ver prueba.

Para la creación de este menú son necesarios los archivos mootools.js que podemos descargar en mootools.net y imageMenu.js en phatfusion.net luego los alojamos en un servidor para conseguir la url y añadirla de la siguiente forma.

Nos situamos justo antes de </head> y añadimos lo siguiente:

<script src='url-del-archivo-mootools.js' type='text/javascript'/>
<script src='url-del-archivo-imageMenu.js' type='text/javascript'/>

El texto en negrita lo reemplazamos por la URL de nuestros archivos mootools.js y imageMenu.js
Ahora vamos a los estilos, nos situamos antes de ]]></b:skin> para añadir lo siguiente:

/*Images menu*/
#kwick {
width:580px;
height:200px;
overflow:hidden;
position:relative;
padding:0;
margin:0pt auto;
}
#kwick ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
display:block;
width:1000px;
height:200px;
padding:0;
margin:0px;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 95px;
/*padding: 10px;*/
background: #fff;
/*border-right: 5px solid #202020;*/
border-right: 2px solid #000000;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
outline: 0; background: #9ce782 url(url-de-la-imagen) ;
}
#kwick .opt2 {
outline: 0; background: #92bdfa url(url-de-la-imagen);
}
#kwick .opt3 {
outline: 0; background: #faa892 url(url-de-la-imagen);
}
#kwick .opt4 {
outline: 0; background: #e78282 url(url-de-la-imagen);
}
#kwick .opt5 {
outline: 0; background: #000 url(url-de-la-imagen);
border-right: 0;
}

#kwick .opt6 {
outline: 0; background: #e78282 url(url-de-la-imagen);
border-right: 0;
}

"Donde url-de-la-imagen añadiremos la url de nuestras imágenes"
Guardamos los cambios y nos dirigimos a Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el siguiente código:

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt2" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt3" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt4" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt5" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt6" href="http://gemablog-.blogspot.com/"></a></li>

</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>

Donde http://gemablog-.blogspot.com/ lo debéis sustituir por la dirección que deseáis enlazar ya sea una sección de vuestro blog o una página externa.
Podemos variar el color background que aparece antes de la url de nuestras imágenes es el color de fondo que se visiona al cargar la página.
outline: 0; background: #000 url(url-de-la-imagen);
border-right: 0;
En #kwick .kwick {
border-right: 2px solid #000000; podemos variar el color y grosor de la línea de separación entre imágenes.

"Antes de añadir este menú debo aclarar que si tenemos aplicados en nuestra plantilla la librería Prototype nos puede crear problemas, al igual que Mootols son lo que se denomina por framework (conjunto de rutinas que permiten crear otros scripts) debemos escoger una u otra librería pero no añadir las dos al mismo tiempo"

(J.Miur ha sido mi fuente de información, en su entrada VideoBox pueden ver más detalles.)